import { useComponentConfigStore } from '../../stores/component-config'
import { useMemo } from 'react'//用于缓存
import MaterialItem from '../MaterialItem'

export default function Materail() {
  const { componentConfig } = useComponentConfigStore()//取出仓库内的组件配置
  const components = useMemo(() => {
    return Object.values(componentConfig).filter(item=>item.name!=='Page')//得到一个数组
  }, [componentConfig])//随着componentConfig变化而执行该方法，只有componentConfig变化了才执行useMemo
  return (
    <div>
      {
        components.map((item,index) => {
          return (
            <MaterialItem key={item.name+index} name={item.name} />
          )
        })
      }
    </div>
  )
}
